<#include "../common/header.htm">
    <!--<div class="content-wrapper">
        <section class="content">
            <div class="row">
                <#include "../account/leftTree.htm">
                <div id="outBody">
                    <div class="stream_search" >
                        <el-form id="listForm" :inline="true" :model="form" class="demo-form-inline">
                            <el-form-item label="交易对手">
                                <el-input v-model="form.rivalName" name="rivalName" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="最小金额">
                                <el-input v-model="form.minMoney" name="minmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="最大金额">
                                <el-input v-model="form.maxMoney" name="maxmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item  class="form_z" label="时间范围">
                                <el-date-picker
                                        align="left"
                                        v-model="form.beginTime"
                                        name="beginTime"
                                        align="right"
                                        type="date"
                                        placeholder=""
                                        :picker-options="pickerOptions1">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="至">
                                <el-date-picker
                                        align="left"
                                        v-model="form.endTime"
                                        name="endTime"
                                        align="right"
                                        type="date"
                                        placeholder=""
                                        :picker-options="pickerOptions1">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button  class="el-button el-button--default reset_button" @click="clear">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="stream_body" >

                        <span class="title">流出主体统计</span>
                        <div class="casemanage-switch">
                            <div class="casemanage-zhexiantu" :class="{active:showType==0}" @click="getlist(0)"  title="切换为块状显示">
                                <i class="iconfont icon-zhexiantu" :class="{active:showType==0}" id="font_zhexian"></i>
                            </div>
                            <div class="casemanage-list" :class="{active:showType==1}" @click="getlist(1)" title="切换为列表显示">
                                <i></i>
                            </div>
                            <div class="showD3"><button type="button" class="btn btn-primary-fullScreen" onClick="show()"></button></div>
                        </div>
                        <hr>
                        <div v-show="!showType" style="height: 300px;margin: 10px 10px 30px;">
                            <div id="main" style="height:300px;"></div>
                        </div>
                        <div v-show="showType">
                            <el-table
                                    @sort-change='sortChange'
                                    ref="singleTable"
                                    :data="tableData"
                                    stripe
                                    highlight-current-row
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        label="序号"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        property="ACCOUNT_BODY"
                                        label="交易主体">
                                </el-table-column>
                                <el-table-column
                                        property="ACCOUNT_BODY_CARD"
                                        label="交易主体卡号"
                                        width="190">
                                    <template slot-scope="scope">
                                        <span :title="scope.row.ACCOUNT_BODY_CARD" class="overflow">{{ scope.row.ACCOUNT_BODY_CARD }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        property="ACCOUNT_RIVAL"
                                        label="交易对手"
                                        >
                                    <template slot-scope="scope">
                                        <span :title="scope.row.ACCOUNT_RIVAL" class="overflow">{{ scope.row.ACCOUNT_RIVAL }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="TOTALMONEY"
                                        label="总金额"
                                        >
                                    <template slot-scope="scope" >
                                        <span >{{ scope.row.TOTALMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="TOTALNUMBER"
                                        label="总次数"
                                        >
                                    <template slot-scope="scope" >
                                        <a href="#" @click="showDialog(scope.row)">{{ scope.row.TOTALNUMBER}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="PUREOUTMONEY"
                                        label="净流出金额">
                                    <template slot-scope="scope">
                                        <span >{{ scope.row.PUREOUTMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="OUTMONEY"
                                        label="流出金额">
                                    <template slot-scope="scope" >
                                        <span >{{ scope.row.OUTMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="OUTMONEYPER"
                                        label="流出金额比">
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="OUTNUMBER"
                                        label="流出次数">
                                    <template slot-scope="scope" >
                                        <a href="#" @click="showDialog(scope.row,1)">{{ scope.row.OUTNUMBER}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="OUTNUMBERPER"
                                        label="流出次数比">
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    background
                                    :current-page.sync="currentPage"
                                    @current-change="handleCurrentChange"
                                    layout="total,prev, pager, next"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </div>

                    <div id="hidebg"></div>

                    <div id="hidebox">
                        <div class="outAccount_d3_head">流出主体统计关系图</div>
                        <span onClick="hide()" style="cursor:pointer;">X</span>
                    </div>
                    <el-dialog
                            title="流出主体统计详情"
                            :visible.sync="dialogVisible"
                            width="700px"
                            top="0"
                            center>
                        <el-table
                                stripe
                                @sort-change='sortChangedata'
                                :data="tableData2"
                                highlight-current-row
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="ACCOUNT_BODY"
                                    label="交易主体">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_BODY" class="overflow">{{ scope.row.ACCOUNT_BODY }}</span>
                                    <span class="badge" style="color: white;">{{ scope.row.BODY_TYPE }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="200"
                                    property="ACCOUNT_BODY_NUMBER"
                                    label="交易主体账号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_BODY_NUMBER" class="overflow">{{ scope.row.ACCOUNT_BODY_NUMBER }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="200"
                                    property="ACCOUNT_RIVAL_CARD"
                                    label="交易主体卡号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_BODY_CARD" class="overflow">{{ scope.row.ACCOUNT_BODY_CARD }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="ACCOUNT_RIVAL"
                                    label="交易对手">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_RIVAL" class="overflow">{{ scope.row.ACCOUNT_RIVAL }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="200"
                                    property="ACCOUNT_RIVAL_NUMBER"
                                    label="交易对手账号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_RIVAL_NUMBER" class="overflow">{{ scope.row.ACCOUNT_RIVAL_NUMBER }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="200"
                                    property="ACCOUNT_RIVAL_CARD"
                                    label="交易对手卡号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_RIVAL_CARD" class="overflow">{{ scope.row.ACCOUNT_RIVAL_CARD }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="170"
                                    sortable='custom'
                                    property="TRADE_DATE"
                                    label="交易时间">
                                <template slot-scope="scope" v-if="scope.row.TRADE_DATE">
                                    <span >{{ scope.row.TRADE_DATE | formatDate  }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    sortable='custom'
                                    property="ACCOUNT_MONEY"
                                    label="交易金额">
                                <template slot-scope="scope" v-if="scope.row.ACCOUNT_MONEY">
                                    <span >{{ scope.row.ACCOUNT_MONEY | formatMoney  }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="150"
                                    sortable='custom'
                                    property="SURPLUS_MONEY"
                                    label="交易后余额">
                                <template slot-scope="scope" v-if="scope.row.SURPLUS_MONEY">
                                    <span >{{ scope.row.SURPLUS_MONEY | formatMoney  }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    label="摘要">
                                <template slot-scope="scope">
                                    <span :title="scope.row.CONTENT_ABSTRACT" class="overflow">{{ scope.row.CONTENT_ABSTRACT }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="ACCOUNT_RIVAL_BANK"
                                    label="对手归属行">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_RIVAL_BANK" class="overflow">{{ scope.row.ACCOUNT_RIVAL_BANK }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="ACCOUNT_BODY_BANK"
                                    label="主体归属行">
                                <template slot-scope="scope">
                                    <span :title="scope.row.ACCOUNT_BODY_BANK" class="overflow">{{ scope.row.ACCOUNT_BODY_BANK }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="INSTITUTION_NUMBER"
                                    label="对方机构号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.INSTITUTION_NUMBER" class="overflow">{{ scope.row.INSTITUTION_NUMBER }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="TRADING_ORGANIZATION_NUMBER"
                                    label="交易机构号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.TRADING_ORGANIZATION_NUMBER" class="overflow">{{ scope.row.TRADING_ORGANIZATION_NUMBER }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="TELLER_NUMBER"
                                    label="柜员号">
                                <template slot-scope="scope">
                                    <span :title="scope.row.TELLER_NUMBER" class="overflow">{{ scope.row.TELLER_NUMBER }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="120"
                                    property="REMARKS"
                                    label="备注">
                                <template slot-scope="scope">
                                    <span :title="scope.row.REMARKS" class="overflow">{{ scope.row.REMARKS }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                :current-page.sync="currentPage2"
                                :page-size="10"
                                @current-change="handleCurrentChange2"
                                layout="total, prev, pager, next"
                                :total="total2"
                        >
                        </el-pagination>
                    </el-dialog>
                </div>
            </div>
        </section>
    </div>
    <script>
        function show(){  //显示隐藏层和弹出层
            var hideobj=document.getElementById("hidebg");
            hidebg.style.display="block";  //显示隐藏层
            document.getElementById("hidebox").style.display="block";  //显示弹出层
            var data = {
                accountRival: $("input[name='rivalName']").val(),
                minMoney: $("input[name='minmoney']").val(),
                maxMoney: $("input[name='maxmoney']").val(),
                beginTime: $("input[name='beginTime']").val(),
                endTime: $("input[name='endTime']").val(),
                cardList:arr,
                _checkedAccount:_checkedAccount.toString()
            }
            var data1 = JSON.stringify(data);
            $.ajax({
                url: '${ctx}/bill/stream/d3/outbodystatistics_d3',
                type: 'post',
                data:data1,
                dataType:'json',
                contentType: "application/json;charset=utf-8",
                success:function (obj) {
                    console.log(obj)
                    D3utils.reload(obj.data.nodes,obj.data.links,"#hidebox");
                }
            })
        }
        function hide(){ //去除隐藏层和弹出层
            document.getElementById("hidebg").style.display="none";
            document.getElementById("hidebox").style.display="none";
        }
        var arr=[]
        function _checkedCallback() {
            if(_checkedAccount&&_checkedAccount.length>0){
                arr = _checkedAccount.map(m=>{
                    return "'"+m.split("_")[1]+"'";
                });
                arr = arr.join(',');
                outBody.getlist(0);
            }else{
                arr=[]
                arr = arr.join(',');
                outBody.tableData=[]
                outBody.total=""
                showEcharts('流出主体统计',null,null,null)
            }
        }
        let outBody=new Vue({
            el:"#outBody",
            data:{
                dialogVisible:false,
                showType:0,
                tableData: [],
                tableData2: [],
                currentPage:1,
                currentPage2:1,
                form: {
                    rivalName: '',
                    beginTime: '',
                    endTime: '',
                    minMoney:"",
                    maxMoney:"",
                },
                pageSize:10,
                total:"",
                total2:"",
                sign:"",
                accountRival:"",
                accountRivalCard:"",
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            },
            created:function () {
                arr = arr.join(',');
                this.getlist(0);
            },
            filters: {
                formatDate(time) {
                    var date = new Date(time);
                    return formatDate(date, 'yyyy-MM-dd hh:mm');
                },
                formatMoney(value) {
                	if(!value) return 0;
                    if (Number.isInteger(value)) {
                        return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                    } else {
                        return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                    }
                },
            },
            methods: {
                showDialog(row,sign){
                    this.sign=sign;
                    this.accountRivalCard=row.ACCOUNT_RIVAL_CARD;
                    this.accountRival=row.ACCOUNT_RIVAL;
                    this.getdetail(row.ACCOUNT_BODY_CARD);
                    this.dialogVisible=true;
                },
                getdetail(ACCOUNT_BODY_CARD){
                    request({
                        url: 'bill/stream/inaccountstatistics_detail/'+this.currentPage2+'/10',
                        method: 'post',
                        data:{
                            accountRivalCard:this.accountRivalCard,
                            accountRival:this.accountRival,
                            cardList:ACCOUNT_BODY_CARD,
                            sign:this.sign
                        }
                    }).then(result=>{
                        this.tableData2 = result.data.data.rows;
                        this.total2=result.data.data.total;
                    })
                },
                handleCurrentChange2(val) {
                    this.currentPage2 = val;
                    this.getdetail()
                },
                sortChangedata(column){
                    request({
                        url: 'bill/stream/inaccountstatistics_detail/'+this.currentPage2+'/10',
                        method: 'post',
                        data:{
                            accountRival:this.accountRival,
                            cardList:arr,
                            sign:this.sign,
                            sortName:column.prop,
                            sortOrder:column.order.replace("ending","")
                        }
                    }).then(result=>{
                        this.tableData2 = result.data.data.rows;
                        this.total2=result.data.data.total;
                    })
                },
                sortChange(column) {
                    request({
                        url: 'bill/stream/outbodystatistics/'+this.currentPage+'/'+this.pageSize,
                        method: 'post',
                        data:{
                            rivalName: this.form.rivalName,
                            beginTime: getMyDate(this.form.beginTime),
                            endTime: getMyDate(this.form.endTime),
                            cardList:arr,
                            showType : 1,
                            minMoney: this.form.minMoney,
                            maxMoney: this.form.maxMoney,
                            sortName:column.prop,
                            sortOrder:column.order.replace("ending","")
                        }
                    }).then(result=>{
                        this.tableData=result.data.data.rows;
                        this.total=result.data.data.total;
                    })
                },
                onSubmit() {
                    this.getlist(this.showType);
                    // this.getlist_d3();
                },
                exportExcel(){
                    let a = "rivalName="+this.form.rivalName+"&minMoney="+this.form.minMoney+"&maxMoney="+this.form.maxMoney+"&beginTime="+getMyDate(this.form.beginTime)+"&endTime="+getMyDate(this.form.endTime)+"&cardList="+arr;
                    window.location.href="${ctx}/bill/stream/export/3?"+a;
                },
                clear(){
                    this.form={
                        rivalName: '',
                        beginTime: '',
                        endTime: '',
                        minMoney:"",
                        maxMoney:"",
                    }
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.getlist(this.currentPage)
                },
                getlist(showType){
                	this.showType = showType;
                    request({
                        url: 'bill/stream/outbodystatistics/'+this.currentPage+'/'+this.pageSize,
                        method: 'post',
                        data:{
                            rivalName : this.form.rivalName,
                            minMoney : this.form.minMoney,
                            maxMoney : this.form.maxMoney,
                            beginTime : getMyDate(this.form.beginTime),
                            endTime : getMyDate(this.form.endTime),
                            cardList :arr
                        }
                    }).then(result=>{
                        console.log(result.data.data);
                        var xAxis = result.data.data.allRows.map(m => m.ACCOUNT_RIVAL);
                        var echarts_data1 = result.data.data.allRows.map(m => m.INMONEY);
                        var echarts_data2 = result.data.data.allRows.map(m => m.OUTMONEY);
                        showEcharts('流出主体统计',xAxis,echarts_data1,echarts_data2);
                        this.tableData=result.data.data.rows;
                        this.total=result.data.data.total;
                    })
                },
                getlist_d3(){
                    request({
                        url: 'bill/stream/d3/outbodystatistics_d3',
                        method: 'post',
                        data:{
                            accountRival: this.form.rivalName,
                            minMoney: this.form.minMoney,
                            maxMoney: this.form.maxMoney,
                            beginTime: getMyDate(this.form.beginTime),
                            endTime: getMyDate(this.form.endTime),
                            cardList:arr,
                            _checkedAccount:_checkedAccount.toString()
                        }
                    }).then(result=>{
                        console.log(result.data.data)
                        if(result.data.data.nodes.length){
                            // D3utils.reload(result.data.data.nodes,result.data.data.links,"#outBody_d3");
                            D3utils.reload(result.data.data.nodes,result.data.data.links,"#fullScreenContent");
                        }else{
                            $("#outBody_d3").hide()
                        }

                    })
                }
            }
        })
        $("#listForm").validate({
            rules: {
                minmoney : {
                    digits:true
                },
                maxmoney : {
                    digits:true
                }
            },
            messages: {
            }
        });
    </script>
    <style>
        #hidebg {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 90%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        .outAccount_d3_head {
            float: left;
            font-size: 20px;
        }
        #hidebox span{
            font-size: 20px;
        }
        .el-form-item.form_z {
            margin-right: 7px !important;
        }
        input.error { border: 1px solid red; }
        label.error {
            background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
        .badge{
            background-color: #f7051f;
        }
        .col-md-10 {
            width: 86%;
        }
        .stream_body {
            margin-top: 18px;
            min-height: 553px;
            margin-bottom: -15px;
        }
        .content {
            padding: 25px 15px 0 25px;
        }
        .stream_search {
            margin: 0 0 20px 0;
        }
        .el-form-item__label{
            color: #6f7689;
            font-weight: 400;
            font-size: 13px;
        }
        div#outBody {
            margin-left: 260px;
            margin-right: 10px;
        }
        .el-form-item__label{
            color: #6f7689;
        }
        .el-form--inline .el-form-item{
            margin-right: 23px;
        }
        .el-button{
            padding: 8px 15px;
            width: 70px;
            height: 32px;
            margin-right: -14px;
        }
        button.el-button.el-button--default.reset_button {
            background-color: #f4f4f4;
            color: #444;
            border-color: #ddd;
        }
        .button.el-button.el-button--default.reset_button:focus, button.el-button.el-button--default.reset_button:hover{
            border-color: #adadad;
            background-color: #e7e7e7;
        }
        .casemanage-switch .casemanage-zhexiantu.active {
            background-color: #4695ed;
        }
        .casemanage-switch .casemanage-zhexiantu {
            background-color: #f2f6f9;
            float: left;
            width: 50px;
            height: 35px;
            display: block;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            line-height: 35px;
            text-align: center;
        }
        #font_zhexian{
            color: #C1C2C3;
            font-size: 18px;
        }
        #font_zhexian.active{
            color: #F4F9FE;
        }
        .el-input__inner{
            border-color: #D2D6DE;
            font-size: 12px;
            border-color:#e4e4e4;
        }
        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-dialog--small{
            width: 95%;
            margin-top: 67px;
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        h4#myLargeModalLabel {
            margin-left: 30px;
            font-size: 20px;
        }
        .modal-dialog{
            height: 92%;
            width: 90%;
        }
        div#fullScreenContent {
            margin: auto auto;
        }
        .showD3 {
            display: inline-block;
            background-color: #F2F6F9;
            width: 50px;
            height: 35px;
        }
        button.btn.btn-primary-fullScreen{
            border: transparent;
            height: 24px;
            background: url(../../../imgs/icon-relative.png);
            background-size: 20px;
            background-repeat: no-repeat;
            background-position: center center;
            display: inline-block;
            width: 50px;
            height: 35px;
        }
        button.btn.btn-primary.active{
            background-color: #4595ec;
        }
        .btn-primary:active:focus, .btn-primary:active:hover{
            background-color: transparent;
            border-color: transparent;
        }
        svg {
            width: 100%;
            height: 91%;
        }
        button.close span {
            font-size: 55px;
            font-weight: 350;
        }
        .modal-header .close {
            margin-top: -19px;
        }
    </style>-->
    <#include "../common/footer.htm">